<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { icons } from './icons';
import { getLocalIcons } from '@/utils/icon';
import { fetchGetMenuList } from '@/service/api';

defineOptions({ name: 'IconPage' });

// 本地图标
const localIcons = ref([]);
// 菜单数据
const menuData = ref([]);
// 表格加载状态
const loading = ref(false);
// 上传对话框可见性
const uploadDialogVisible = ref(false);
// 上传文件
const uploadFile = ref(null);
// 文件名
const fileName = ref('');

// 初始化
onMounted(async () => {
  await loadLocalIcons();
  await loadMenuData();
});

// 加载本地图标
async function loadLocalIcons() {
  loading.value = true;
  try {
    const icons = getLocalIcons();
    localIcons.value = icons.map((name, index) => ({
      id: index + 1,
      name,
      usedBy: []
    }));
  } catch (error) {
    console.error('加载图标失败:', error);
    ElMessage.error('加载图标失败');
  } finally {
    loading.value = false;
  }
}

// 加载菜单数据
async function loadMenuData() {
  try {
    const { data } = await fetchGetMenuList({ page: 1, limit: 1000 });
    menuData.value = data.records || [];
    
    // 更新图标使用情况
    updateIconUsage();
  } catch (error) {
    console.error('加载菜单数据失败:', error);
  }
}

// 更新图标使用情况
function updateIconUsage() {
  // 重置使用情况
  localIcons.value.forEach(icon => {
    icon.usedBy = [];
  });
  
  // 检查每个菜单项
  menuData.value.forEach(menu => {
    if (menu.iconType === '2' && menu.icon) {
      const iconItem = localIcons.value.find(item => item.name === menu.icon);
      if (iconItem) {
        iconItem.usedBy.push({
          id: menu.id,
          name: menu.menuName
        });
      }
    }
  });
}

// 删除图标
function handleDelete(row) {
  // 检查图标是否正在使用
  if (row.usedBy.length > 0) {
    ElMessage.warning('该图标正在被菜单使用，无法删除');
    return;
  }
  
  ElMessageBox.confirm('确定要删除该图标吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 在实际应用中，这里应该有一个删除后端图标文件的API
    ElMessage.success('图标删除成功（模拟）');
    
    // 从列表中移除
    const index = localIcons.value.findIndex(item => item.id === row.id);
    if (index !== -1) {
      localIcons.value.splice(index, 1);
    }
  }).catch(() => {});
}

// 处理图标上传
function handleUpload() {
  if (!uploadFile.value || !fileName.value) {
    ElMessage.warning('请选择文件并输入图标名称');
    return;
  }
  
  // 检查图标名称是否已存在
  if (localIcons.value.some(icon => icon.name === fileName.value)) {
    ElMessage.warning('图标名称已存在');
    return;
  }
  
  // 在实际应用中，这里应该有一个上传文件到后端的API
  ElMessage.success('图标上传成功（模拟）');
  
  // 添加到列表
  const newId = localIcons.value.length > 0 
    ? Math.max(...localIcons.value.map(icon => icon.id)) + 1 
    : 1;
    
  localIcons.value.push({
    id: newId,
    name: fileName.value,
    usedBy: []
  });
  
  // 关闭对话框和重置表单
  uploadDialogVisible.value = false;
  uploadFile.value = null;
  fileName.value = '';
}

// 文件选择改变
function handleFileChange(event) {
  const file = event.target.files[0];
  if (!file) return;
  
  // 检查文件类型
  if (file.type !== 'image/svg+xml') {
    ElMessage.error('请上传SVG格式的图标');
    event.target.value = ''; // 清空选择
    return;
  }
  
  uploadFile.value = file;
  
  // 自动设置文件名（不包含扩展名）
  if (!fileName.value) {
    fileName.value = file.name.replace('.svg', '');
  }
}
</script>

<template>
  <div class="h-full">
    <ElCard class="mt-10px card-wrapper">
      <template #header>
        <div class="flex justify-between items-center">
          <span>本地图标管理</span>
          <ElButton type="primary" @click="uploadDialogVisible = true">添加图标</ElButton>
        </div>
      </template>
      
      <ElTable :data="localIcons" border v-loading="loading" row-key="id">
        <ElTableColumn label="ID" prop="id" width="80" sortable />
        <ElTableColumn label="图标名称" prop="name" min-width="120" />
        <ElTableColumn label="图标预览" width="120">
          <template #default="{ row }">
            <div class="flex justify-center">
              <SvgIcon :local-icon="row.name" class="text-30px text-primary" />
            </div>
          </template>
        </ElTableColumn>
        <ElTableColumn label="使用情况" min-width="200">
          <template #default="{ row }">
            <div v-if="row.usedBy.length === 0" class="text-gray-400">
              <em>未被使用</em>
            </div>
            <div v-else>
              <ElTag v-for="menu in row.usedBy" :key="menu.id" class="mr-5px mb-5px">
                {{ menu.name }} (ID: {{ menu.id }})
              </ElTag>
            </div>
          </template>
        </ElTableColumn>
        <ElTableColumn label="操作" width="150" align="center">
          <template #default="{ row }">
            <ElButton 
              type="danger" 
              size="small" 
              :disabled="row.usedBy.length > 0"
              @click="handleDelete(row)"
            >
              删除
            </ElButton>
          </template>
        </ElTableColumn>
      </ElTable>
    </ElCard>

    <!-- 上传图标对话框 -->
    <ElDialog v-model="uploadDialogVisible" title="添加图标" width="500px">
      <ElForm label-position="top">
        <ElFormItem label="选择SVG图标文件">
          <input 
            type="file" 
            accept=".svg" 
            @change="handleFileChange"
            class="w-full"
          />
        </ElFormItem>
        <ElFormItem label="图标名称">
          <ElInput v-model="fileName" placeholder="请输入图标名称（不含扩展名）" />
        </ElFormItem>
        <div class="text-gray-400 text-sm mt-2 mb-4">
          注：上传的SVG文件将保存在 src/assets/local-icon 目录下
        </div>
      </ElForm>
      <template #footer>
        <ElButton @click="uploadDialogVisible = false">取消</ElButton>
        <ElButton type="primary" @click="handleUpload">上传</ElButton>
      </template>
    </ElDialog>
  </div>
</template>

<style scoped>
/* 修改文件上传按钮样式 */
input[type="file"] {
  border: 1px dashed #d9d9d9;
  border-radius: 4px;
  padding: 8px;
  width: 100%;
}
input[type="file"]:hover {
  border-color: #409eff;
}
</style>
